<template>
	<div id="user">
		<Modal
	        v-model="modal"
	        :title="modalTitle"
	        class="userModalStyle"
	        width='650px'
	        @on-ok="modalOk">
	        <div class="content">
				
				<div>
					<p class="tag"><span class="star">*</span>用户名:</p>
					<Input v-model="userData.username"/>
				</div>
				<div>
					<p class="tag"><span class="star">*</span>姓名:</p>
					<Input v-model="userData.name"/>
				</div>
				<div>
					<p class="tag"><span class="star">*</span>密码:</p>
					<Input v-model="userData.password"/>
				</div>
				<div>
					<p class="tag"><span class="star">*</span>角色:</p>
					<Input v-model="userData.role"/>
				</div>
				<div>
					<p class="tag">邮箱:</p>
					<Input v-model="userData.email"/>
				</div>
				<div>
					<p class="tag">手机号:</p>
					<Input v-model="userData.mobile"/>
				</div>
				<div>
					<p class="tag">状态:</p>
					<RadioGroup v-model="userData.status">
				        <Radio label="ENABLE">有效</Radio>
				        <Radio label="DISABLE">无效</Radio>
				    </RadioGroup>
				</div>
	        </div>
	    </Modal>
		<div class="top">
			<div>
				<li>
					<span>用户名：</span>
					<Input v-model="request.username"></Input>
				</li>
				<li>
					<span>角色：</span>
					<Input v-model="request.role"></Input>
				</li>
				<li>
					<Button @click="search" class="search">查询</Button>
				</li>
			</div>
			<div>
				<Button class="add" @click="add">添加</Button>
			</div>
		</div>
		<div class="main" v-if="show">
			<table>
				<tr>
					<th>用户名</th>
					<th>姓名</th>
					<th>角色</th>
					<th>邮箱</th>
					<th>手机号</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="user in users">
					<td>{{user.username}}</td>
					<td>{{user.name}}</td>
					<td>{{user.role}}</td>
					<td>{{user.email}}</td>
					<td>{{user.mobile}}</td>
					<td>{{user.status|userStatus}}</td>
					<td class="handle">
						<span class='iconfont' @click="edit(user)" title="编辑">&#xe601;</span>
						<span class='iconfont' @click="reset(user)" title="重置密码">&#xe72c;</span>
					</td>
				</tr>
			</table>
		</div>
		<Pagination :search='search' :request='request' :data='users'/>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import "./style.scss";
</style>